<script setup lang="ts">
import PanBoxItem from "@/components/show_item/panbox/PanBoxItem.vue";
import {ref, PropType} from "vue";
export interface newAlbumListInterface{
  picUrl: string,
  name: string
  company: string
}
defineProps({
  newAlbumList: {
    type: [Array, Number] as PropType<newAlbumListInterface[]>,
    required: true
  },
});
const panBoxContainer = ref(null as unknown as HTMLDivElement);
const page = ref(0);
const handleMargin = () => {
  panBoxContainer.value.style.marginLeft = `${(-604) * page.value}px`;
};
const nextPage = () => {
  if (page.value < 1) {
    page.value++;
    handleMargin();
  } else {
    page.value = 0;
    handleMargin();
  }
};
const previousPage = () => {
  if (page.value > 0) {
    page.value--;
    handleMargin();
  } else {
    page.value = 1;
    handleMargin();
  }
};
</script>
<template>
  <div class="m_pan_box_container">
    <span @click="previousPage">
    <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-zuojiantou"></use>
    </svg>
    </span>
    <div class="s_pan_box_container clear-fix">
      <div class="pan_box_container" ref="panBoxContainer">
        <pan-box-item v-for="message of newAlbumList" :show-message="message"></pan-box-item>
      </div>
    </div>
    <span @click="nextPage">
      <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-youjiantou"></use>
      </svg>
    </span>
  </div>
</template>
<style scoped lang="scss">
.m_pan_box_container {
  display: grid;
  grid-template-columns:3% 94% 3%;
  width: 100%;
  height: 186px;
  margin-top: 20px;
  border: 1px solid #bdc3c7;
  padding: 30px 22px 40px 22px;

  span {
    display: flex;
    height: 100px;
    align-items: center;
    cursor: pointer;
  }

  .s_pan_box_container {
    overflow: hidden;
    height: 150px;

    .pan_box_container {
      transition: all .5s linear;
    }
  }
}
</style>
